<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/echarts.js"></script>
</head>
<body>
    <div id="main" style="width:600px;height:400px;"></div>
    <script>
        var idEchs = document.getElementById("main");
        var ech = echarts.init(idEchs);
        var option = {
            title: {
              text: '衣服销量',
              textStyle:{
                color:'red',
                fontSize:16
              },
              borderColor:'blue',
              borderWidth:2,
              borderRadius:5,
              subtext:'衣服销量',
              subtextStyle:{
                fontSize:12
              },
              left:'50%',
              textAlign:'center'
            },
            color:['red','blue','skyblue','gray'],
            tooltip: {},
            // legend: {
            //   data: ['销量']
            // },
            xAxis: {
              type:'category',
              data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
              axisTick:{
                alignWithLabel: true,
              },
              name:'衣服品类',
              nameLocation:'middle',
              nameRotate:-10,
              nameTextStyle:{
                color:'skyblue',
                fontSize:18
              },
              nameGap:30,
              offset:5,
              
            },
            yAxis: {
                type:'value',
                name:'销量/个',
                nameTextStyle:{
                  fontWeight:600,
                  borderWidth:1,
                  borderColor: 'green',
                  borderRadius: 10,
                  padding:5,
                  align: 'center'
                },
                axisLine:{
                  show:true,
                  symbolOffset:[0,10],
                  symbol:['none','arrow']
                },
                offset:15,
                min:50
            },
            series: [
            {
                type: 'bar',
                name: '销量',
                data: [120, 200, 150, 90, 75, 110],
                colorBy:'data'
            }
        ]
      };
        ech.setOption(option);
    </script>
</body>
</html>